<template>
<article class="projects projects-list">
    <div class="projects-entry">
        <div class="project">
            <img :src="require('@/assets/images/cd-icon-movie.svg')" />
        </div>
        <h1 class="entry-title">
            <a :href="projects.url !== '#' ? projects.url : 'javascript:;'" :target="projects.url !== '#' ? '_blank' : '_self'">{{ projects.title }}</a>
        </h1>
        <div class="p-time">
            <i class="iconfont iconmeditor-time"></i> {{ projects.pubTime }}
        </div>
        <div class="summary" v-html="projects.summary"></div>
        <footer class="entry-footer">
            <div class="projects-more">
                <a v-if="projects.topology" href="javascript:;" @click="showTopology(projects.id)">拓扑图</a>
                <a v-if="projects.url !== '#'" :href="projects.url" target="_blank">
                    前去浏览
                    <i class="iconfont iconfish-li"></i>
                </a>
            </div>
        </footer>
        <div v-if="projects.topology" v-show="projects.id === topologyId" class="topology" @click="hideTopology($event)">
            <i class="btn-close" @click="hideTopology('close')"><img src="@/assets/images/ico-close.svg" alt="#" /></i>
            <div class="topology-image">
                <img :src="require('@/assets/images/' + projects.topology)" :alt="projects.title" />
            </div>
        </div>
    </div>
    <hr />
</article>
</template>

<script>
export default {
    name: "projects",
    props: {
        projects: {
            type: Object,
        },
    },
    data() {
        return {
            topologyId: null,
        };
    },
    methods: {
        showTopology(id) {
            this.topologyId = id;
        },
        hideTopology(e) {
            if ((e.target && e.target.tagName !== "IMG") || e === "close")
                this.topologyId = null;
        },
    },
};
</script>

<style lang="less" scoped>
.projects.projects-list {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;

    &:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 50px;
        left: 19px;
        width: 1px;
        height: 100%;
        background-color: #f6f6f6;
    }

    .topology {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9;

        .btn-close {
            display: block;
            position: absolute;
            right: 8%;
            top: 6%;
            width: 20px;
            height: 20px;
            cursor: pointer;

            img {
                width: 100%;
            }
        }

        .topology-image {
            position: relative;
            width: 80%;
            height: 90%;
            margin: 3% auto;
            overflow-y: scroll;
            border-radius: 6px;

            img {
                display: block;
                max-width: 100%;
                margin: 0 auto;
                border-radius: 6px;
            }
        }
    }
}

.projects-entry {
    .project {
        position: absolute;
        top: 10px;
        left: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #acb7c0;
        box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0, 0, 0, 0.08),
            0 3px 0 4px rgba(0, 0, 0, 0.05);

        img {
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
            left: 50%;
            top: 50%;
            margin-left: -12px;
            margin-top: -12px;
        }
    }

    .entry-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 50px;
        margin-left: 50px;
        position: relative;
        z-index: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 70%;
        color: #757575;

        & a:hover {
            color: rgba(73, 119, 194, 1);
        }
    }

    .p-time {
        position: absolute;
        right: 0;
        top: 16px;
        font-size: 12px;
        color: #989898;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
    }

    .summary {
        min-height: 60px;
        margin: 0 0 0 50px;
        font-size: 14px;
        color: #6f6f6f;
        letter-spacing: 1px;
        line-height: 30px;
    }

    footer.entry-footer {
        margin: 0 0 0 17%;
        list-style: none;

        .projects-more {
            text-align: right;
            font-size: 12px;
            color: rgba(73, 119, 194, 0.6);

            a {
                margin-left: 10px;

                &:hover {
                    color: #737373;
                }

                .iconfont {
                    position: relative;
                    top: 4px;
                    font-size: 25px;
                }
            }
        }

        .comnum {
            float: left;
        }
    }
}

.projects hr {
    width: 30%;
    height: 1px;
    margin: 0 auto;
    border: 0;
    background: #f3f3f3;
}

@media (max-width: 800px) {
    .projects-entry {
        .entry-title {
            font-size: 16px;
            line-height: 30px;
        }

        .p-time {
            position: relative;
            margin: -15px 0 0 50px;
        }

        .summary {
            margin-top: 22px;
        }
    }

    .projects-list hr {
        margin-top: 20px;
    }
}
</style>
